<template>
  <view class="simple-tabbar" v-if="tabbarData && tabbarData.items && tabbarData.items.length > 0">
    <view 
      v-for="(item, index) in tabbarData.items" 
      :key="index"
      class="tabbar-item"
      :class="{ active: isActive(item.url) }"
      @tap="sheep.$router.go(item.url)"
    >
      <text class="tabbar-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import sheep from '@/sheep';

  const props = defineProps({
    path: String,
    default: '',
  });

  const activeTab = ref(0);
  const tabbarData = computed(() => {
    // 从store中获取tabbar数据
    const appStore = sheep.$store('app');
    const tabbar = appStore.template?.basic?.tabbar;

    // 如果没有tabbar数据，返回默认值
    if (!tabbar || !tabbar.items) {
      return {
          items: [
            {
              text: '首页',
              iconPath: '/static/images/tabbar/home.png',
              url: '/pages/index/index',
            },
            {
              text: '分类',
              iconPath: '/static/images/tabbar/category.png',
              url: '/pages/index/category',
            },
            {
              text: '购物车',
              iconPath: '/static/images/tabbar/cart.png',
              url: '/pages/index/cart',
            },
            {
              text: '我的',
              iconPath: '/static/images/tabbar/user.png',
              url: '/pages/index/user',
            },
          ],
          color: '#1989fa',
        };
      }

      return tabbar;
  });

  // 根据当前路由设置激活的tab
  const currentRoute = computed(() => {
    const pages = getCurrentPages();
    if (pages.length > 0) {
      const currentPage = pages[pages.length - 1];
      return currentPage.route;
    }
    return '';
  });

  // 判断当前页面是否是激活状态
  const isActive = (url) => {
    const pages = getCurrentPages();
    if (pages.length > 0) {
      const currentPage = pages[pages.length - 1];
      return currentPage.route === url.replace('/pages/', '').replace('.html', '');
    }
    return false;
  };
</script>

<style lang="scss">
  .simple-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    background-color: #ffffff;
    border-top: 1px solid #eeeeee;
    z-index: 999;

    .tabbar-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .tabbar-text {
        font-size: 12px;
        color: #999999;
      }

      &.active {
        .tabbar-text {
          color: #1989fa;
        }
      }
    }
  }
</style>
